<template>
    <div id="user-infor">
      <header class="pl13-pt13">
        <img src="../img/user_top.jpg" width="60"/>
        <section class="pl10">
          <p class="f16">李富贵</p>
          <p class="f13 mt5" style="color: #B5B5B5">{{phone}}</p>
        </section>
      </header>
      <div class="mt5">
        <i-cell title="姓名" value="李富贵"></i-cell>
        <i-cell title="修改密码" url="../../login-register/find-password/main" is-link></i-cell>
        <i-cell class="last-setting" title="手机" is-link :value="phone" url="../../login-register/change-phone/main"></i-cell>
      </div>
      <div class="mt5 pl13-pt13" style="background: #fff;">
        <section class="weichat-list">
          <p class="flex1 f16">微信<span class="f13" style="color: #F54727">({{weichats.length}})</span></p>
          <a class="f14" style="color: #747474;"  href="../binding-weichat/main">添加</a>
        </section>
        <section v-for="weichat in weichats" :key="weichat.index" class="weichat-list">
          <p class="flex1 f16">{{weichat.name}}</p>
          <i class="iconfont" @tap="deleteWeichat(weichat.name)">&#xe62d;</i>
        </section>
      </div>
      <footer class="pl13-pt13 f16 tc">退出当前账户</footer>
      <i-modal :visible="visible5" i-class="user-infor">
          <div class="tc">
            <h1 class="f18" style="font-weight: 500">{{title}}</h1>
            <p class="f16 pt10 pb10">{{deleteUser}}</p>
            <section class="flex align-center">
              <i-button type="success" i-class="binding-buttons cancel" class="flex1=" @tap="deleteSure">确定</i-button>
              <i-button  i-class="binding-buttons cancel" class="flex1" @tap="visible5 = false">取消</i-button>
            </section>
          </div>
      </i-modal>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'user-system',
        data () {
          return {
            title: '解绑微信',
            deleteUser: '',
            visible5: false,
            user: {},
            index: '',
            phone: '15387498749',
            weichats: [{id: 1, name: '爱上一匹野马'}, {id: 2, name: 'fafsdafdsafasdf'}, {id: 3, name: '哈哈师大会'}, {id: 4, name: '发士大夫士大夫'}]
          };
        },
        computed: {
          getWeichats () {
            return '微信(' + this.weichats.length + ')';
          }
        },
        methods: {
          deleteSure () {
            for (let i = 0; i < this.weichats.length; i++) {
              if (this.weichats[i].name === this.index) {
                this.weichats.splice(i, 1);
              }
            }
          },
          deleteWeichat (index) {
            this.deleteUser = `您要解绑微信${index}`;
            this.index = index;
            this.visible5 = true;
        },
        created () {
        }
    }
    };
</script>

<style lang="stylus" scoped>
    #user-infor
       width 100%;
       header
        display flex;align-items center; height 75px; background #fff;
        img
          border-radius 50%; width 60px; height 60px;
       .alter-weichart
          background #fff;
       footer
         position fixed; bottom 0; width 100%; height 50px;line-height 50px; background #fff;
    .weichat-list
      display flex; align-items center; padding 14px 0; border-bottom 1px solid #ECECEC;
    .wechart-list:last-of-type
      border-color transparent;
    a:hover
      background inherit;
</style>
<style lang="stylus">
  .binding-buttons
    margin 0!important; flex 1!important;
  .cancel
    background #F2F2F2!important; border-color #F2F2F2!important; color #747474!important;
</style>
